import React, { useContext } from 'react';
import { QuickCodeContext } from './context';
import { useDrag, useDrop } from 'react-dnd';
import { DesignFrameworkContext } from '../design/context';

const QuickCodeRender = ({ schema }: any) => {

  const { registerComponents, ItemRender } = useContext(QuickCodeContext)
  // 
  let RcComponent: any
  let ChildrenWrap: any
  if (schema.component) {
    RcComponent = registerComponents[schema.component];

  }
  if (schema.childrenWrap) {
    ChildrenWrap = registerComponents[schema.childrenWrap];
  }
  const RcChildren = () => {
    if (!schema.children) {
      return null
    }
    return schema.children.map((item, originalIndex) => {

      // if (item.children) {
      //   if (RcComponent) {
      //     if (ItemRender) {
      //       return <ItemRender index={originalIndex} moveItemById={moveItemById} item={item} key={item.id}>
      //         <RcComponent ><QuickCodeRender schema={item} /></RcComponent>
      //       </ItemRender>
      //     }
      //     return <RcComponent key={item.id}><QuickCodeRender schema={item} /></RcComponent>
      //   }
      //   return <QuickCodeRender key={item.id} schema={item} />
      // }
      // if (ItemRender) {
      //   if (ChildrenWrap) {
      //     return <ChildrenWrap key={item.id}><ItemRender index={originalIndex} moveItemById={moveItemById} item={item}>
      //       <RcComponent item={item} />
      //     </ItemRender></ChildrenWrap>
      //   }
      //   return <ItemRender index={originalIndex} moveItemById={moveItemById} item={item} key={item.id}>
      //     <RcComponent item={item} />
      //   </ItemRender>
      // }
      //<Item moveItemById={moveItemById} item={item} key={item.id}>{item.id}</Item>
      // return <RcComponent item={item} key={item.id} />
      // console.log('devdev',item)
      return <QuickCodeRender key={item.id} schema={item} />
      // return null
    })
  }

  // if (ItemRender) {
  //   return <ItemRender item={schema}>
  //     <RcComponent item={schema}>
  //       <RcChildren />
  //     </RcComponent>
  //   </ItemRender>
  // }
  // if (RcComponent) {
  //   return (<RcComponent item={schema}>
  //     <RcChildren />
  //   </RcComponent>)
  // }
  return ItemRender ? <ItemRender item={schema}>
    <RcComponent item={schema}>
      <RcChildren />
    </RcComponent>
  </ItemRender> : <RcComponent item={schema}>
    <RcChildren />
  </RcComponent>
}
export default React.memo(QuickCodeRender)